<template>
  <div id="bottomLeft">
    <div class="">
     
      <div>
         <div id="bottomLeftChart2" style="width:100%;height:300px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: null
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts实例
      let t = this;
      this.chart = this.$echarts.init(document.getElementById("bottomLeftChart2"));
      //  ----------------------------------------------------------------
      let category = ['0:00', '1:30', '4:30', '5:30', '6:30', '7:30', '9:30', '10:30', '12:30', '13:30', '15:30', '16:30', '18:30', '19:30', '21:30', '22:30'];
      let lineData = [
        620, 532, 601, 934, 790, 1030, 1120,232, 601, 944, 1190, 1230, 1120,924, 920, 1130, 1220
      ];
   
     let lineData1 = [
        820, 932, 901, 934, 1290, 1330, 1320,932, 901, 934, 1290, 1330, 1320,934, 1290, 1330, 1320
      ]
      let w = document.documentElement.clientWidth / 100;
      let w1 = document.documentElement.clientWidth / 120;
      let option = {
        title: {
          text: "17日水风互补结果",
          x: "center",
          y: 5,
          textStyle: {
            color: "#B4B4B4",
            fontSize: w,
            fontWeight: "normal"
          }
        },
        backgroundColor:'',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          top: '88%',
          left: '20%',
          orient: "horizontal",
          data: ["17日风电曲线", "17日水电出力"],
          textStyle: {
            color: "#fff",
            fontSize: w1
          }
        },
       grid: {
          left: 45,
          right:15,
          top: "10%"
        },
        
        xAxis: {
          data: category,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4"
            }
          }
        },
        yAxis: [
          {
            splitLine: { show: false },

            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            }
          }
        ],
        
        series: [
          {
            name: "17日风电曲线",
            type: "line",
            symbol:"none",
            lineStyle: {
              width: 2
            },
            smooth: true,
            showSymbol: false,
            itemStyle: {
                color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  
                  offset: 0,
                  color: '#20F8FF'
                },
                {
                  
                  offset: 1,
                  color: '#005566'
                }
              ])
              },
            areaStyle: {
                
              color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  
                  offset: 0,
                  color: "rgba(42,219,255,30)"
                },
                {
                  
                  offset: 1,
                  color: 'rgba(42,219,255,0)',
                }
              ])

            },
            data: lineData1
          },
          {
            name: "17日水电出力",
            type: "line",
            symbol:"none",
            smooth: true,
            lineStyle: {
              width: 2
            },
            showSymbol: false,
            itemStyle: {
                color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  
                  offset: 0,
                  color: '#1591FF'
                },
                {
                  
                  offset: 1,
                  color: '#0F6FA7'
                }
              ])
              },
            areaStyle: {
              
              color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  
                  offset: 0,
                  color: 'rgb(0, 136, 255,50)'
                },
                {
                  
                  offset: 1,
                  color: 'rgb(0, 136,255,0)'
                }
              ])
            },
            data: lineData
          }
        ]
      };
      this.chart.setOption(option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>


<style lang="scss">
#bottomLeft {
  padding: 5px;
  margin-bottom: 5px;
  height: 300px;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
  .bg-color-black {
     padding: 0.2rem;
    height: 30vh;
    border-radius: 0.125rem;
  }
  .text {
    color: #c3cbde;
  }
  .chart-box {
    margin-top: 0.2rem;
    width: 2.125rem;
    height: 2.125rem;
    .active-ring-name {
      padding-top: 0.125rem;
    }
  }
}
</style>